<script setup>
import Card from "@/components/Card/Card.vue";
import Table from "@/components/Table/Table.vue";
import { Alarm_option } from "@/utils/options/AlarmChart.option";
import Echarts from "@/components/Echarts/Echarts.vue";
import { computed, onMounted, ref, onUnmounted } from "vue";
import api from "@/api";
import { getOpt } from "@/pages/HomePage/options/MockData";
import bus from "@/utils/bus.js";
let isMockData = true;
const name = "告警来源统计";
const alarmList = ref([]);

//提取value，计算总和
const valueArray = computed(() => {
  return alarmList.value.map((item) => item.value);
});

const option = ref({});

const column = ref([
  { label: "告警类型", props: "alarmType", width: 17 },
  { label: "告警等级", props: "alarmLevel", width: 17 },
  { label: "告警详情", props: "alarmDesc", width: 21 },
  { label: "告警时间", props: "alarmTime", dataType: "Time", width: 25 },
]);

const row = ref([]);

const grade_list = ref([
  { name: "一级", num: 0 },
  { name: "二级", num: 0 },
  { name: "三级", num: 0 },
  { name: "四级", num: 0 },
]);
const style_grade = (grade) => {
  const judgeGrade = {
    一级: "/imgs/30.png",
    二级: "/imgs/11.png",
    三级: "/imgs/23.png",
    四级: "/imgs/24.png",
  };

  return judgeGrade[grade] ? judgeGrade[grade] : "/imgs/30.png";
};
//取随机数
const getRandon = (min, max) => {
  if (min === max) {
    return max;
  }
  if (min === 0 && max === 0) {
    return 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
const dataInit = async () => {
  isMockData = await getOpt("state");
  bus.emit("useMock", isMockData);
  const colors = [
    "linear-gradient(0deg,#299ae7 0%, #ffffff 100%)",
    "linear-gradient(0deg,#fff96c 0%, #ffffff 100%)",
    "linear-gradient(0deg,#0ce8eb 0%, #ffffff 100%)",
    "linear-gradient(0deg,#8ecbe8 0%, #ffffff 100%)",
  ];
  if (isMockData) {
    const mockdata = await getOpt();
    alarmList.value = [
      {
        name: "动环告警",
        value: getRandon(mockdata.v10?.min, mockdata.v10?.max) ?? 0,
        background: colors[0],
      },
      {
        name: "故障告警",
        value: getRandon(mockdata.v11?.min, mockdata.v11?.max) ?? 0,
        background: colors[1],
      },
      {
        name: "U位告警",
        value: getRandon(mockdata.v9?.min, mockdata.v9?.max) ?? 0,
        background: colors[2],
      },
    ];
    grade_list.value = [
      { name: "一级", num: getRandon(mockdata.v12?.min, mockdata.v12?.max) ?? 0 },
      { name: "二级", num: getRandon(mockdata.v12?.min, mockdata.v13?.max) ?? 0 },
      { name: "三级", num: getRandon(mockdata.v12?.min, mockdata.v14?.max) ?? 0 },
      { name: "四级", num: getRandon(mockdata.v12?.min, mockdata.v15?.max) ?? 0 },
    ];
  } else {
    const { data } = await api.alarm({ type: 1 });
    alarmList.value = [
      {
        name: "动环告警",
        value: data?.sealHeadAlarm ?? 0,
        background: colors[0],
      },
      { name: "网络告警", value: data?.faultAlarm ?? 0, background: colors[1] },
      { name: "资源告警", value: data?.uAlarm ?? 0, background: colors[2] },
    ];
  }
  const totalValue = alarmList.value.reduce((accumulator, currentValue) => {
    return accumulator + currentValue.value;
  }, 0);
  option.value = Alarm_option(valueArray.value, totalValue);
};
const tableInit = async () => {
  const {
    data: { records },
  } = await api.alarmList({ size: 10 });
  row.value = records;
};
onMounted(() => {
  dataInit();
  tableInit();
});
</script>

<template>
  <div class="frame com-flex-c">
    <div class="top-frame">
      <Card :name="name" :imgType="1">
        <template #body>
          <div class="card-frame com-flex-1 com-full com-flex-r com-center">
            <div class="left-card com-full com-flex-c">
              <div class="echart-frame com-flex-r">
                <div class="echart">
                  <Echarts :options="option" />
                </div>
                <div class="info com-flex-c com-center-r">
                  <div
                    class="com-flex-r com-center-c"
                    v-for="(item, index) in alarmList"
                    :key="index"
                  >
                    <div class="point" :style="{ background: item.background }"></div>
                    <span class="name">{{ item.name }}</span>
                    <div class="number">{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table">
              <Table :column="column" :row="row" />
            </div>
          </div>
        </template>
      </Card>
    </div>
    <div class="bottom-frame com-flex-r">
      <div
        class="item com-flex-1 com-full com-center"
        v-for="(item, index) in grade_list"
        :key="index"
      >
        <img class="imgs" :src="style_grade(item.name)" />
        <div class="grade">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.frame {
  justify-content: space-between;
  width: 100%;
  height: 70%;

  .top-frame {
    height: 70%;
    width: 100%;

    // .card-frame {
    //   // margin: 25px 0 0 23px;
    // }

    .table {
      width: 53%;
      height: 100%;
      margin: 40px 0 0 23px;
    }

    .left-card {
      width: 50%;
      height: 100%;
      margin: 40px 0 0 23px;
    }

    .echart-frame {
      background-color: #fff;
      margin: 40px 0 0 0;
      justify-content: space-between;
      width: 96%;
      height: 67%;
      background: url("/imgs/15.png");
      background-size: 100% auto;
      background-repeat: no-repeat;

      .echart {
        margin-top: 5px;
        width: 37%;
        height: 83%;
      }

      .info {
        justify-content: space-evenly;
        width: 46%;
        height: 90%;
        margin-bottom: 20px;

        .point {
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }

        .name {
          margin-left: 13px;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b5c4d0;
          letter-spacing: 1.5px;
        }

        .number {
          margin-left: 80px;
          font-size: 32px;
          font-family: DIN Alternate, DIN Alternate-Bold;
          font-weight: 700;
          text-align: left;
          color: #0080cc;
          letter-spacing: 2.4px;
        }
      }
    }
  }

  .bottom-frame {
    height: 28.5%;
    width: 98%;
    margin: 0 auto;
    background: url("/imgs/46.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .item {
      display: flex;
      align-items: center;
    }

    .imgs {
      width: 46px;
      height: 46px;
    }

    .grade {
      margin: 0 15px;
      font-size: calc(var(--fs) * 1.11);
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #b5c4d0;
      letter-spacing: 3.84px;
    }

    .num {
      font-size: calc(var(--fs) * 2.2);
      font-family: DIN Alternate, DIN Alternate-Bold;
      font-weight: 700;
      text-align: left;
      color: #ffffff;
    }
  }
}
</style>
